<template>
 <div class="d-uploader">
    <FormButton
      @click="handleChooseFile"
      class="d-uploader-btn-choose"
      >选择文件</FormButton>
    <FormButton
      v-if="(files && files.length)"
      @click="handleUpload"
      scene="primary"
      class="d-uploader-btn-upload"
      >点击上传</FormButton>
    <div class="d-uploader-names">
      <div v-for="(item,i) in files" :key="i + item.name" class="d-uploader-item">
        <span :class="item.id ? 'd-text-success' : ''" class="d-uploader-item-name">{{ item.name }}</span>
        <span v-if="!item.id" @click="handleRemove(item)" class="d-uploader-item-remove"><i class="d-cross-icon"></i></span>
      </div>
    </div>
    <input ref="file" type="file" @change="handleChange" :accept="accept" :multiple="multiple" class="d-uploader-file" />
 </div>
</template>

<script>
import { FormButton } from '@daelui/vdog/dist/components.js'
import ds from '@/service/components/ds'

export default {
  components: {
    FormButton
  },

  props: {
    name: {
      type: String,
      default () {
        return 'file'
      }
    },
    // 支持的文件
    accept: {
      type: String,
      default () {
        return '*'
      }
    },
    multiple: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 支持的文件
    action: {
      type: String,
      default () {
        return '/'
      }
    },
  },

  data () {
    return {
      files: []
    }
  },

  methods: {
    // 选择文件
    handleChooseFile () {
      this.$refs.file.click()
    },
    // 文件修改
    handleChange (e) {
      let files = e.target.files
      files = Array.from(files).map(file => {
        return {
          name: file.name,
          size: file.size,
          type: file.type,
          file: file,
          id: ''
        }
      })
      this.files = [...this.files, ...files]
      this.$emit('change', files, e)
    },
    // 文件移除
    handleRemove (file) {
      this.files = this.files.filter(item => {
        return item !== file
      })
    },
    // 上传
    async handleUpload () {
      console.log(this.files)
      let isValid = true
      // HTML 文件类型input，由用户选择
      let files = this.files.filter(item => {
        return !item.id
      })
      if (!files.length) {
        this.$message({
          message: '未选择文件',
          type: 'warning',
          showClose: true
        })
        return false
      }
      files.forEach(item => {
        if (!/^[\w\.\_\-$@]+$/.test(item.name)) {
          isValid = false
        }
      })
      if (!isValid) {
        this.$message({
          message: '文件名称仅支持：字母数字.-_$@',
          type: 'warning',
          showClose: true
        })
        return false
      }
      for (let i = 0; i < files.length; i++) {
        let file = files[i]
        let formData = new FormData()
        formData.append(this.name, file.file)
        await ds.post(this.action, formData).then(res => {
          let data = res.data || {}
          file.id = data.id
        })
        // var request = new XMLHttpRequest()
        // request.open('POST;, 'http://127.0.0.1:3601/tigerlair/resource/upload')
        // request.send(formData)
      }
    },
    clear () {
      this.$refs.file.value = ''
      this.files = []
    }
  }
}
</script>

<style lang="less">
@import '@daelui/dogui/src/less/theme/_setting.less';
.d-uploader {
  position: relative;
  .d-uploader-file {
    display: none;
  }
  .d-uploader-btn-choose {
    margin-right: 4px;
  }
  .d-uploader-names {
    padding: 4px 0;
    font-size: 12px;
    color: #666;
  }
  .d-uploader-item {
    line-height: 16px;
  }
  .d-uploader-item-remove {
    margin-left: 4px;
    cursor: pointer;
    &:hover {
      color: @color-theme;
    }
  }
}
</style>
